<template>
  <div 
    class="apple-card" 
    :class="[
      elevation ? `apple-card--elevation-${elevation}` : '',
      { 
        'apple-card--hoverable': hoverable,
        'apple-card--bordered': bordered,
        'apple-card--flat': flat
      }
    ]"
  >
    <div v-if="$slots.header" class="apple-card__header">
      <slot name="header"></slot>
    </div>
    <div v-if="$slots.media" class="apple-card__media">
      <slot name="media"></slot>
    </div>
    <div v-if="$slots.default" class="apple-card__body">
      <slot></slot>
    </div>
    <div v-if="$slots.footer" class="apple-card__footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

defineProps({
  elevation: {
    type: [Number, String],
    default: '1',
    validator: (value) => ['0', '1', '2', '3', 0, 1, 2, 3].includes(value)
  },
  hoverable: {
    type: Boolean,
    default: false
  },
  bordered: {
    type: Boolean,
    default: false
  },
  flat: {
    type: Boolean,
    default: false
  }
});
</script>

<style scoped>
@import '../../assets/styles/variables.css';

.apple-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--apple-surface-light);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transition: all var(--animation-speed-fast) var(--ease-apple);
}

/* 阴影级别 */
.apple-card--elevation-0 {
  box-shadow: none;
}

.apple-card--elevation-1 {
  box-shadow: var(--apple-shadow-sm);
}

.apple-card--elevation-2 {
  box-shadow: var(--apple-shadow-md);
}

.apple-card--elevation-3 {
  box-shadow: var(--apple-shadow-lg);
}

/* 边框卡片 */
.apple-card--bordered {
  border: 1px solid var(--apple-border-light);
}

/* 扁平卡片 */
.apple-card--flat {
  background-color: var(--apple-surface-secondary-light);
  border-radius: var(--border-radius-md);
}

/* 可悬停卡片 */
.apple-card--hoverable {
  cursor: pointer;
}

.apple-card--hoverable:hover {
  transform: translateY(-4px);
  box-shadow: var(--apple-shadow-lg);
}

/* 卡片头部 */
.apple-card__header {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--apple-border-light);
  font-weight: var(--font-weight-medium);
}

/* 媒体区域 */
.apple-card__media {
  width: 100%;
  position: relative;
}

.apple-card__media img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* 卡片主体 */
.apple-card__body {
  padding: var(--spacing-lg);
  flex: 1;
}

/* 卡片底部 */
.apple-card__footer {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--apple-border-light);
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .apple-card {
    background-color: var(--apple-surface-dark);
  }
  
  .apple-card--bordered {
    border-color: var(--apple-border-dark);
  }
  
  .apple-card--flat {
    background-color: var(--apple-surface-secondary-dark);
  }
  
  .apple-card__header {
    border-bottom-color: var(--apple-border-dark);
  }
  
  .apple-card__footer {
    border-top-color: var(--apple-border-dark);
  }
}
</style> 